<template>
	<view class="container">
		<view class="">
			<uni-forms ref="form" :rules="rules" :modelValue="setUpParams">
				<uni-forms-item class="login-user" label="IP地址" name="address">
					<uni-easyinput type="text" v-model="setUpParams.address" placeholder="请输入IP地址" />
				</uni-forms-item>
				<uni-forms-item class="login-password" label="端口号" name="serve">
					<uni-easyinput type="text" v-model="setUpParams.serve" placeholder="请输入端口号" />
				</uni-forms-item>
			</uni-forms>
			<button class="login" @click="submit('form')">确定</button>
		</view>
	</view>
</template>

<script>
	import {
		setStorageSync,
		removeStorageSync
	} from '../../utils/utils.js'
	export default {
		data() {
			return {
				rules: {
					// 对name字段进行必填验证
					address: {
						rules: [{
								required: true,
								errorMessage: '请输入IP地址',
							},

						]
					},
					// 对email字段进行必填验证
					serve: {
						rules: [{
								required: true,
								errorMessage: '请输入端口号',
							},

						]
					}
				},
				setUpParams: {
					address: null,
					serve: null
				},
				path: null
			}
		},
		methods: {
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					removeStorageSync('base_url')
					this.path = 'http://' + this.setUpParams.address + ':' + this.setUpParams.serve
					setStorageSync('base_url', this.path)
					uni.navigateTo({
						url: '/pages/login/index'
					})
				}).catch(err => {
					console.log('err', err);
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		/* 设置容器的宽高 */
		width: 100%;
		height: 100vh;
		/* 或者设置具体的高度值 */
	}

	.login-img {
		width: 100%;
	}

	.login-user {
		margin: 40rpx ;
		


	}

	.login-password {
		margin: 40rpx ;
		

	}

	.login {
		width: 80%;
		margin-left: 10%;
		margin-top: 10%;
		float: left;
		color: white;
		background-color: #166534;
		border-radius: 50rpx;
	}

	.setup {
		// width: 40%;
		margin-left: 4%;
		float: left;
		margin-top: 10%;
		color: white;
		background-color: #166534;
		border-radius: 50rpx;
	}
</style>